
<template>
    <div class="personInfo">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Personal information
            </div>
        </div>
        <van-form ref="formRef" @submit="doSubmit">
            <!-- 最高学历 -->
            <div class="xueli">
                <van-field readonly clickable name="Education" v-model="form.model.submitData.education" :value="xuelivalue"
                    label="Education" placeholder="Please select education" @click="xuelishowPicker = true"
                    :rules="[{ required: true, message: 'The information cannot be empty' }]" />
                <van-popup v-model="xuelishowPicker" position="bottom">
                    <van-picker show-toolbar :columns="xuelicolumns" @confirm="xueliConfirm" confirm-button-text="Confirm"
                        cancel-button-text="Cancel" @cancel="xuelishowPicker = false" />
                </van-popup>
            </div>
            <!-- 性别 -->
            <div class="gender">
                <van-field readonly clickable v-model="form.model.submitData.sex" name="Gender" :value="sexvalue"
                    label="Gender" placeholder="The input information is illegal" @click="sexshowPicker = true"
                    :rules="[{ required: true, message: 'The information cannot be empty' }]" />
                <van-popup v-model="sexshowPicker" position="bottom">
                    <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar :columns="sexcolumns"
                        @confirm="sexConfirm" @cancel="sexshowPicker = false" />
                </van-popup>
            </div>
            <!-- 婚姻情况 -->
            <div class="marital">

                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]" readonly clickable
                    name="Marital Status" v-model="form.model.submitData.marital" :value="hyvalue" label="Marital Status"
                    placeholder="Please select marital status" @click="hyshowPicker = true" />
                <van-popup v-model="hyshowPicker" position="bottom">
                    <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar :columns="hycolumns"
                        @confirm="hyConfirm" @cancel="showPicker = false" />
                </van-popup>
            </div>
            <!-- 孩子数量 -->
            <div class="childrenCount">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]" readonly clickable
                    v-model="form.model.submitData.childrenCount" name="Children count" :value="hzvalue"
                    label="Children count" placeholder="Please select the number of children"
                    @click="hzshowPicker = true" />
                <van-popup v-model="hzshowPicker" position="bottom">
                    <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar :columns="hzcolumns"
                        @confirm="hzConfirm" @cancel="hzshowPicker = false" />
                </van-popup>
            </div>
            <!-- 邮政编码 -->
            <div class="postalCode">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model.number="form.model.submitData.postalCode" name="Postal code" label="Postal code"
                    placeholder="Please enter postal code" />
            </div>
            <!-- 住宅类型 -->
            <div class="addresstype">

                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]" readonly clickable
                    name="Residence" v-model="form.model.submitData.residence" :value="addressvalue" label="Residence"
                    placeholder="Please enter residence type" @click="addressshowPicker = true" />
                <van-popup v-model="addressshowPicker" position="bottom">
                    <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar
                        :columns="addresscolumns" @confirm="addressConfirm" @cancel="addressshowPicker = false" />
                </van-popup>
            </div>
            <!-- 省市区 -->
            <div class="dizhi">

                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model="address.fieldValue" is-link readonly label="Address"
                    placeholder="Please select a province or city" @click="address.show = true" />
                <van-popup v-model="address.show" round position="bottom">
                    <van-cascader v-model="address.cascader" title="Address" :options="address.list"
                        placeholder="Please select" @close="address.show = false" @finish="addressFinish"
                        :field-names="{ text: 'name', value: 'id' }" @change="addressChange" />
                </van-popup>
            </div>
            <!-- 详细地址 -->
            <div class="detailaddress">
                <van-field :rules="[{ required: true, message: 'The information cannot be empty' }]"
                    v-model="form.model.submitData.address.detailAddress" name="Address Details" label="Address Details"
                    placeholder="Please enter the detailed address" />
            </div>
            <!-- 邮箱 -->
            <div class="email">
                <van-field :rules="emailrule" v-model="form.model.submitData.email" name="Email" label="Email"
                    placeholder="Please enter the Email" />
            </div>
            <!-- 按钮 -->
            <van-button class="persionBtn" type="submit">Submit</van-button>
        </van-form>
    </div>
</template>
<script>
import { getdefaultform, getAddressAPI, uploadbaseform } from '../../api/index.js'
import { jiami, jiemi } from "../../utils/aeskey.js";
import { Toast } from "vant";
export default {
    name: 'personInformation',
    data() {
        return {
            show: [true, true, true, true],
            emailrule: [{
                required: true, message: 'The information cannot be empty',
                pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/, message: 'Mailbox format error'
            },],
            // 学历
            xuelivalue: '',
            xuelishowPicker: false,
            xuelicolumns: [],
            // 性别
            sexshowPicker: false,
            sexvalue: '',
            sexcolumns: [],
            //婚姻情况
            hyshowPicker: false,
            hyvalue: '',
            hycolumns: [],
            //孩子数量
            hzshowPicker: false,
            hzvalue: '',
            hzcolumns: [],
            //住址
            addressshowPicker: false,
            addressvalue: '',
            addresscolumns: [],
            address: {
                fieldValue: '',
                show: false,
                cascader: '',
                list: []
            },
            list: [],
            form: {
                model: {
                    formId: '',
                    submitData: {
                        education: '',//教育
                        sex: '',//性别
                        marital: '',//婚姻
                        childrenCount: '',//有几个孩子
                        postalCode: '',//邮政编码
                        residence: '',//住址
                        address: {
                            bigAddress: {
                                province: '',//省
                                city: ''
                            },
                            detailAddress: '' //详细住址
                        },
                        email: ''//邮箱
                    }
                }
            }
        }
    },
    methods: {
        // xueli
        async xueliConfirm(value, index) {
            this.form.model.submitData.education = this.list[0].options[index].id
            this.xuelishowPicker = false
        },
        //性别
        sexConfirm(value, index) {
            this.form.model.submitData.sex = this.list[1].options[index].id
            this.sexshowPicker = false
        },
        //婚姻
        hyConfirm(value, index) {
            this.form.model.submitData.marital = this.list[2].options[index].id
            this.hyshowPicker = false
        },
        //孩子
        hzConfirm(value, index) {
            this.form.model.submitData.childrenCount = this.list[3].options[index].id
            this.hzshowPicker = false
        },
        //住址
        addressConfirm(value, index) {
            this.form.model.submitData.residence = this.list[5].options[index].id
            this.addressshowPicker = false
        },
        //当省市区变化的时候
        async addressChange({ value, selectedOptions, tabIndex }) {
            const r = {
                model: value
            }
            const res = await getAddressAPI(jiami(r))
            console.log('市', jiemi(res.data))
            console.log('value, selectedOptions, tabIndex', value, selectedOptions, tabIndex)
            selectedOptions.forEach(item => {
                if (item.id === value) {
                    item.children = jiemi(res.data).model
                }
            })
        },
        //当地址选择完毕时
        async addressFinish({ selectedOptions }) {
            selectedOptions.forEach(item => {
                if (item.children) {
                    this.address.show = false
                }
            })
            this.address.fieldValue = selectedOptions.map((option) => option.name).join('/');
            console.log(selectedOptions, 'selectedOptions')
            try {
                this.form.model.submitData.address.bigAddress.province = selectedOptions[0].id || ''
                this.form.model.submitData.address.bigAddress.city = selectedOptions[1].id || ''
            } catch (error) {
                console.log(error)
            }
        },
        //获取地址信息
        async getaddress() {
            const r = {
                model: ''
            }
            const res = await getAddressAPI(jiami(r))
            jiemi(res.data).model.forEach(item => {
                this.address.list.push({
                    id: item.id,
                    name: item.name,
                    children: item.children || null
                })
            })
            console.log(this.address.list, '省')
            console.log('地址信息', jiemi(res.data))
        },
        // 获取指定表单
        async getFormData() {
            const r = {
                model: {
                    formId: '',
                    nodeType: ''
                }
            }
            this.form.model.formId = this.$store.state.formData[0].formId
            r.model.formId = this.$store.state.formData[0].formId
            const res = await getdefaultform(jiami(r))
            const ret = jiemi(res.data).model.forms[0].content
            this.list = jiemi(res.data).model.forms[0].content
            console.log('list数组', this.list)
            console.log('ret', ret)
            //教育赋值
            this.xuelicolumns = ret[0].options.map(item => item.name)
            //性别赋值
            this.sexcolumns = ret[1].options.map(item => item.name)
            //婚姻赋值
            this.hycolumns = ret[2].options.map(item => item.name)
            //孩子赋值
            this.hzcolumns = ret[3].options.map(item => item.name)
            //住址赋值
            this.addresscolumns = ret[5].options.map(item => item.name)
        },
        //提交表单
        async doSubmit(val) {
            console.log(this.form)
            console.log(val)
            const res = await uploadbaseform(jiami(this.form))
            console.log('个人信息提交', jiemi(res.data))
            Toast('Submitted successfully')
            location.reload();
            // this.$router.push('/contacts')
        }
    },
    created() {
        // this.$store.dispatch('weiwancehngform')
        this.getFormData()
        //获取地址信息
        this.getaddress()
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.personInfo {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (67/@a);
    box-sizing: border-box;

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (90/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .persionBtn {
        width: (232/@a);
        height: (44/@a);
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
        border-radius: (10/@a);
        margin-top: (20/@a);
        margin-left: (70/@a);
    }

}
</style>